<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
    <head>
        <title class="question-context-title" th:text="${question['context']}+' - 问题详情 - '+${infoMap['title']}"></title>
        <div data-th-replace="layout/head"></div>
        <link rel="stylesheet" th:href="@{{path}/front/mobile/v3/wmui/0.6.2/css/wm-extend.min.css?v={v}(path=${staticPath},v=${v})}">
        <link rel="stylesheet" th:href="@{{path}/common/webuploader/webuploader.css?v={v}(path=${staticPath}, v=${v})}">
    </head>
    <body>
    <!-- top bar -->
    <header class="bar bar-nav">
        <a class="button button-link button-nav pull-left goBack" href="javascript:void(0);" onclick="window.history.go(-1)">
            <span class="iconfont icon-fanhui"></span>
        </a>
        <h1 class='title title-white'>问题详情</h1>
    </header>
    <!-- top bar end-->

    <input type="hidden" id="questionId" th:value="${question['id']}"/>
    <input type="hidden" id="complete-status" th:value="${question['completeStatus']}"/>
    <input type="hidden" id="questioner" th:value="${question['questioner']}"/>
    <input type="hidden" id="attender" th:value="${question['attender']}"/>
    <input type="hidden" id="question-isFree" th:value="${question['isFree']}"/>
    <input id="browseNum" type="hidden" th:value="${question['browseNum']}"/>
    <th:block th:if="${question['teacherMap']}!=null">
        <input type="hidden" id="isQuestion" th:value="${question['teacherMap']['isQuestion']}"/>
        <input type="hidden" id="questionFee" th:value="${question['teacherMap']['questionFee']}" />
        <input type="hidden" id="teacher_name" th:value="${question['teacherMap']['teacherName']}"/>
    </th:block>

    <nav class="bar bar-tab wm-bar-tab-bx pl75 pr75">
        <form  class="hide" th:if="${question['isFree']==1} or ${question['questioner']} or ${question['attender']}" id="reply-form">
            <input type="hidden" id="save-reply-qaId" name="questionId"/>
            <input type="hidden" id="save-reply-context" name="replyContext"/>
            <input type="hidden" id="save-reply-toUserId" name="toUserId"/>
            <input type="hidden" id="save-reply-parentId" name="parentId"/>
        </form>
        <aside th:if="${question['isFree']==1} or ${question['questioner']} or ${question['attender']}" class="tab-item inp-txt__wrap">
            <textarea class="inp-txt-bx vam" id="commentInp" placeholder="写评论"></textarea>
            <span class="fs7 c-blue vam hide" id="commentBtn">发布</span>
        </aside>
        <a class="tab-item external" href="javascript:void(0);">
            <i class="icon iconfont icon-taolun" style="font-size: 0.9rem"></i>
            <span th:text="${question['replyNum']}"></span>
        </a>
        <a id="thumbBtn" class="tab-item external" href="javascript:void(0);">
            <i class="icon iconfont icon-xihuan" th:classappend="${question['thumber']}?'hide':''" style="font-size: 0.98rem;font-weight: 700"></i>
            <i class="icon iconfont icon-love_fill c-orange" th:classappend="!(${question['thumber']})?'hide':''" style="font-size: .98rem"></i>
            <span id="thumbNum" th:text="${question['thumbNum']}"></span>
        </a>
        <a class="tab-item external questionShareBtn" href="javascript:void(0)">
            <i class="icon icon-share vam" style="font-size: .8rem"></i>
        </a>
    </nav>

    <div class="page-infinite__wrap teacherInfo-page__wrap" style="bottom: 2.2rem">
        <div class="page-group">
            <div id="page-infinite-scroll-bottom" class="page page-current">
                <div class="content infinite-scroll native-scroll" data-type='native' data-distance="100">
                    <article class="">
                        <div class="list-block question-info__wrap no-mt">
                            <ul class="list-container facebook-card">
                                <li class="card-header">
                                    <div class="facebook-avatar mr5">
                                        <img class="wm-img list-block-userface" th:attr="data-src=${question['user']['avatar']}" th:src="@{{path}/front/mobile/v3/img/default/default-face.jpg(path=${staticPath})}" width="42" height="42" alt="">
                                    </div>
                                    <div class="facebook-name c-333" th:text="${question['user']['nickname']}"></div>
                                    <div class="facebook-date c-bbb" th:text="${#strings.substring(question['createTime'], 0, 16)}"></div>
                                    <div class="mt5 ml5 mr5 question-info-txt__wrap">
                                        <div class="fs7 c-333 questionContext" th:text="${question['context']}"></div>
                                        <div class="mt5" th:if="!${#arrays.isEmpty(question['imageArr'])}">
                                            <div class="topic-list-picture__wrap">
                                                <section class="topic-list-picture-item" th:each=" image : ${question['imageArr']}">
                                                    <aside class="topic-list-picture-shadow topic-photo-popup"></aside>
                                                    <img class="wm-img topic-l-picture" th:attr="data-src=${image}" th:src="@{{path}/front/mobile/v3/img/default/default-face.jpg(path=${staticPath})}">
                                                </section>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <section class="wm-line"></section>
                        </div>
                        <div class="list-block question-info__wrap no-mt">
                            <ul class="list-container facebook-card">
                                <li class="card-header">
                                    <th:block th:if="${question['completeStatus']==2} or ${question['isFree']!=1}">
                                    <section class="pull-right">
                                        <span th:if="${question['completeStatus']==1}" class="c-blue fs4"> 未回答 </span>
                                        <span th:if="${question['completeStatus']==2}  and  ${question['isFree']}!=1 and ${question['questioner']} and ${question['qaAddList']}!=null" th:id="(${#lists.size(question['qaAddList'])<2})?'addQuestionBtn':''"  th:classappend="(${#lists.size(question['qaAddList'])<2})?'button-danger':'button-light'" class="button button-round"> 追问</span>
                                        <span th:if="${question['completeStatus']==2}  and  ${question['isFree']}!=1 and ${question['questioner']} and ${question['qaAddList']}==null" id="addQuestionBtn"   class="button button-round button-danger"> 追问</span>
                                        <span th:if="${question['completeStatus']==2}  and  ${question['isFree']}!=1 and ${question['questioner']}"  class="c-bbb fs4 ml5">只有两次追问哦</span>

                                        <span th:if="!${question['questioner']} and ${question['isFree']!=1} and ${question['completeStatus']==2}" th:attr="data-id=${question['teacherMap']['id']},data-isQuestion=${question['teacherMap']['isQuestion']},data-questionFee=${question['teacherMap']['questionFee']},data-name=${question['teacherMap']['teacherName']}" class="button button-round button-danger toQuestionPopBtn"> 提问 </span>
                                    </section>
                                    <div class="facebook-avatar mr5">
                                        <a th:href="${#maps.isEmpty(question['teacherMap'])} ? 'javascript:void(0);' : @{/mobile/teacher/teacherInfo?teacherId={teacherId}(teacherId=${question['teacherMap']['id']})}">
                                            <img  th:if="!${#maps.isEmpty(question['teacherMap'])}" class="wm-img list-block-userface"
                                                 th:src="${#maps.isEmpty(question['teacherMap']['imageMap'])} ? @{{path}/front/mobile/v3/img/default/default-face.jpg(path=${staticPath})} : ${question['teacherMap']['imageMap']['mobileUrlMap']['large']}"
                                                 width="42" height="42" alt="">
                                            <img th:if=" ${#maps.isEmpty(question['teacherMap'])} and !${#maps.isEmpty(question['replyUser'])}" class="wm-img list-block-userface"
                                                 th:src="  !${#maps.isEmpty(question['replyUser']['imageMap'])}? ${question['replyUser']['imageMap']['mobileUrlMap']['large']}:@{{path}/front/mobile/v3/img/default/default-face.jpg(path=${staticPath})}"
                                                 width="42" height="42" alt="">
                                        </a>
                                    </div>
                                    <div class="facebook-name c-333" th:text="!${#maps.isEmpty(question['teacherMap'])} ? ${question['teacherMap']['teacherName']} : (!${#maps.isEmpty(question['replyUser'])} ? ${question['replyUser']['ralName']} : '系统管理员' )"></div>
                                    <div class="facebook-date c-bbb" th:text="${question['completeStatus']==1}?'未回答':${#strings.substring(question['replyTime'],0,16)}"></div>
                                    </th:block>
                                        <div class="mt5 ml5 mr5 question-info-txt__wrap">
                                        <!--未围观 显示-->
                                        <section th:if="${question['completeStatus']==1}" class="no-data__wrap">
                                            <em>&nbsp;</em>
                                            <p>抱歉，讲师还没有回答哦~~~</p>
                                        </section>

                                        <div th:if="${question['isFree']==2} and ${question['completeStatus']==2} and !${question['questioner']} and !${question['attender']}" class="mt5 pt5">
                                            <section class="wen-line-bx">
                                                <aside class="wen-line-txt">
                                                    <span class="c-888"><i class="iconfont icon-mima"></i> 问题价值</span>
                                                    <span class="c-red" th:text="'￥ ' + ${question['price']}"></span>
                                                    <span class="c-888">，立即围观答案</span>
                                                </aside>
                                            </section>
                                            <div class="mt5 text-center">
                                                <a href="javascript:void(0);" class="question-wg-btn button button-fill button-round button-danger">
                                                    1元围观
                                                </a>
                                            </div>
                                        </div>
                                        <!--未围观 显示-->

                                        <!--围观 显示-->
                                        <div th:if="${question['isFree']}==1 or ${question['questioner']} or ${question['attender']}" class="mt5 pt5">
                                            <div class="fs7 c-333" th:utext="${question['replyContext']}"></div>
                                            <div>
                                                <div class="list-block media-list no-mt">
                                                    <ol id="questionAdd-content">
                                                        <li class="question-aq-txt__wrap mt5" th:if="!${#lists.isEmpty(question['qaAddList'])}"  th:each="questionAdd,index:${question['qaAddList']}">
                                                            <div class="item-content">
                                                                <div class="item-media">
                                                                    <span class="fs6 c-green" th:text="${index.count}==1?'追问一':'追问二'"></span>
                                                                </div>
                                                                <div class="item-inner">
                                                                    <span class="fs6 c-333" th:text="${questionAdd['addContext']}"></span>
                                                                </div>
                                                            </div>
                                                            <div th:if="${questionAdd['addAnswer']!=null} and ${#strings.length(questionAdd['addAnswer'])>0}" class="item-content">
                                                                <div class="item-media">
                                                                    <span class="fs6 c-orange" th:text="${index.count}==1?'追答一':'追答二'"></span>
                                                                </div>
                                                                <div class="item-inner">
                                                                    <span class="fs6 c-333" th:text="${questionAdd['addAnswer']}"></span>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    </ol>
                                                </div>
                                            </div>
                                        </div>
                                        <!--围观 显示-->
                                        <div th:if="${question['isFree']==2} and ${question['completeStatus']==2}" class="mt5 pt5">
                                            <section class="text-center mt5 c-666 fs7">
                                                <span class="vam">累计</span>
                                                <span class="vam c-red" th:text="${question['attendNum']}"></span>
                                                <span class="vam">人已围观</span>
                                            </section>
                                            <div class="mt5 text-center" th:if="!${#lists.isEmpty(question['attendList'])}">
                                                <ol class="face-group__wrap" id="attend-list-content">
                                                    <li th:each="attend:${question['attendList']}"><img th:src="${attend['user']['avatar']}" width="34" height="34" alt=""></li>
                                                </ol>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <section class="wm-line"></section>
                        </div>
                        <div th:if="${question['isFree']==1} or ${question['questioner']} or ${question['attender']}">
                            <div class="list-block no-mt">
                                <ul class="list-container wm-question-list__wrap facebook-card" id="reply-list-content">

                                </ul>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </div>

    <!--查看全部回复 Popup 开始-->
    <div class="popup popup-about allReplyPopup">
        <header class="bar bar-nav">
            <button class="button button-link button-nav pull-left close-popup"><span class="iconfont icon-guanbi ml5"></span></button>
            <h1 class="title">全部回复</h1>
        </header>
        <nav class="bar bar-tab wm-bar-tab-bx">
            <form id="reply-form-pop" class="hide">
                <input type="hidden" id="save-reply-qaId-pop" name="questionId"/>
                <input type="hidden" id="save-reply-context-pop" name="replyContext"/>
                <input type="hidden" id="save-reply-toUserId-pop" name="toUserId"/>
                <input type="hidden" id="save-reply-parentId-pop" name="parentId"/>
            </form>
            <aside class="tab-item allReplyPop-inp-txt inp-txt__wrap">
                <textarea class="inp-txt-bx vam" id="commentInp-pop" placeholder="写评论"></textarea>
                <span class="fs7 c-blue vam hide" id="commentBtn-pop">发布</span>
            </aside>
        </nav>
        <div class="content wm-content allReplyPop-content">
            <div>
                <div class="list-block no-mt">
                    <ul class="list-container facebook-card">
                        <li class="card-header">
                            <input type="hidden" id="reply-id"/>
                            <input type="hidden" id="reply-userid"/>
                            <div class="facebook-avatar mr5"><img id="reply-img" class="wm-img list-block-userface" width="42" height="42" alt=""></div>
                            <div class="facebook-name c-blue fs6" id="reply-user"></div>
                            <div class="facebook-date c-bbb fs4" id="reply-date"></div>
                            <div class="wm-comment-list__wrap">
                                <div class="fs7 c-333" id="reply-context"></div>
                            </div>
                        </li>
                    </ul>
                </div>
                <hr>
                <div>
                    <div class="ml5 mr5">
                        <strong class="fs6 c-333">全部回复</strong>
                    </div>
                    <div class="content-padded">
                        <div class="list-block no-mt">
                            <ul class="list-container facebook-card" id="allreply-list-content">

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--查看全部回复 Popup 结束-->

    <!--提问 Popup 开始-->
    <div class="popup popup-about toQuestionPopup">
        <header class="bar bar-nav">
            <button class="button button-link button-nav pull-left close-popup"><span class="iconfont icon-guanbi ml5"></span></button>
            <button id="save-question" class="button button-link button-nav pull-right"><span class="mr5">提交</span></button>
            <h1 class="title">提出问题</h1>
        </header>
        <div class="content">
            <div class="content-padded tqPopContent">
                <div class="list-block no-mt">
                    <form id="question-form">
                        <input type="hidden" id="teacher-id" name="teacherId" th:value="${question['teacherMap']}!=null?${question['teacherMap']['id']}:''"/>
                        <input type="hidden" id="imageStr" name="imageStr"/>
                        <ul>
                            <li>
                                <div class="item-link item-content">
                                    <div class="item-inner">
                                        <div class="item-title fs7">问题分类</div>
                                        <div class="item-input">
                                            <input type="hidden" id="question-type" name="typeId"/>
                                            <input type="text" id="questionType"/>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <div class="item-content tqPopTxtarea">
                                    <div class="item-input quiz-input">
                                        <textarea id="question-context" name="context" placeholder="问题描述，简洁、明了，最多200个字"></textarea>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <div class="item-content pt5">
                                    <div class="clearfix tqImgWrap" id="tqImgWrap">
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="item-content pt5">
                                    <div class="item-input">
                                        <div id="question-upload-box" class="mobile-upload">
                                            <span class="icon icon-picture vam"></span>
                                            选择图片
                                        </div>
                                    </div>
                                    <div class="item-after">
                                        <span class="vam fs6 c-888">添加图片，最多4张</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <div class="item-content">
                                    <div class="item-inner">
                                        <div class="item-title fs6 c-888">隐私提问，不被看到</div>
                                    </div>
                                    <div class="item-input text-right mr5">
                                        <label class="label-switch label-switch-small">
                                            <input type="hidden" name="privacy"/>
                                            <input type="checkbox" id="privacy"/>
                                            <div class="checkbox"></div>
                                        </label>
                                    </div>
                                </div>
                            </li>
                            <li class="ml5 mr5">
                                <div class="mt5 pt5"><strong class="fs4 c-666">付费提问说明</strong></div>
                                <div class="mt5"><span class="fs4 c-888">1、直接向平台讲师提出问题，可在设定时间周期内获得回答，如设定时间周期内无专业答案，问答费用将退回至您的个人账户</span></div>
                                <div class="mt5"><span class="fs4 c-888">2、讲师回答后，其它学员同样需要支付围观费用，此围观费用部分比例将会以你的问答收益获得</span></div>
                            </li>
                        </ul>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--提问 Popup 结束-->

    <!--追问 Popup 开始-->
    <div class="popup popup-about toQuestionAddPopup">
        <header class="bar bar-nav">
            <button class="button button-link button-nav pull-left close-popup"><span class="iconfont icon-guanbi ml5"></span></button>
            <button id="save-question-add" class="button button-link button-nav pull-right"><span class="mr5">提交</span></button>
            <h1 class="title">追问</h1>
        </header>
        <div class="content">
            <div class="content-padded tqPopContent">
                <div class="list-block no-mt">
                    <form id="questionAdd-form">
                        <input type="hidden" id="questionAdd-qaId" name="questionId" value=""/>
                        <ul>
                            <li>
                                <div class="item-content tqPopTxtarea">
                                    <div class="item-input">
                                        <!-- 追问内容 -->
                                        <textarea style="height: 250px;" id="question-addContext" name="addContext" placeholder="请输入追问内容，限200个字"></textarea>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--追问 Popup 结束-->
    <div data-th-replace="layout/footer"></div>
    <script type="text/javascript" th:src="@{{path}/front/mobile/libs/wmui/0.6.2/js/wm-extend.min.js?v={v}(path=${staticPath}, v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/front/mobile/libs/zepto/deferred.js?v={v}(path=${staticPath}, v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/front/mobile/libs/zepto/callbacks.js?v={v}(path=${staticPath}, v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/common/webuploader/webuploader.min.js?v={v}(path=${staticPath}, v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/front/mobile/business/upload/mobile-upload-common.js?v={v}(path=${staticPath}, v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/front/mobile/business/qa/question/question-info.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/front/mobile/business/qa/thumb/question-thumb.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/front/mobile/business/qa/question/to-saveQuestion.js?v={v}(path=${staticPath},v=${v})}"></script>
    </body>
</html>